<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回调函数</title>
    <style>
        #box{
            width: 150px;
            height: 200px;
            background-color: red;
            margin: 150px auto;
            transition: all 0.5s ease 0s;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        const box=document.getElementById('box');
        const gu=(el,{x=0,y=0}={},end=()=>{})=>{
            el.style.transform=`translate3d(${x}px,${y}px,0)`;
            el.addEventListener('transitionend',
            ()=>{
                end();
            },
            false
            );
        };
        console.log(box)
        document.addEventListener('click',() => {
            
            gu(box,{x:150, y:0},()=>{
                gu(box,{x:150,y:150},()=>{
                    gu(box,{x:0,y:150},()=>{
                        gu(box,{})
                    })
                })
            })
        },
        false
        ) 
    </script>
</body>
</html>